<template>
  <div>
    <div class="popUp">
      <van-share-sheet
        v-model:show="showShare"
        title="立即分享给好友"
        :options="options"
        @select="onSelect"
      ></van-share-sheet>
    </div>

    <div class="posbox">
      <img src="../assets/img/返回.png" alt="" class="back" @click="goback" />

      <img
        src="../assets/img/更多.png"
        alt=""
        class="more"
        @click="showShare = true"
      />
    </div>

    <div class="header">
      <img src="../assets/img/图层1362.png" alt="" />
      <div class="info">
        <img src="../assets/img/head.png" alt="" />
        <h2>{{ username }}</h2>
        <div>
          <span>关注132</span>
          <span>粉丝1.6W</span>
        </div>
      </div>

      <div class="organization">
        <img src="../assets/img/头像.png" alt="" class="img" />
        <div class="count">
          <h2>我的社团</h2>
          <div>
            <span>社员&nbsp;&nbsp;&nbsp;15</span>
            <span>粉丝&nbsp;&nbsp;&nbsp;0</span>
          </div>
        </div>
        <img src="../assets/img/去到图标.png" alt="" class="arrows" />
      </div>
    </div>

    <div class="main">
      <h2>作品</h2>
      <div class="main-list">
        <img src="../assets/img/图层.png" alt="" class="bgd" />

        <div class="tag">
          <p>来点电子JK//</p>
          <span>#插画</span>
          <span>#原创</span>
        </div>

        <div class="header-imgs">
          <img src="../assets/img/header.png" alt="" />
          <em class="header-id">{{ username }}</em>
        </div>

        <div class="images">
          <div class="iconic">
            <img src="../assets/img/kanguo.png" alt="" />
            <i>1.3w</i>
          </div>
          <div class="iconics">
            <img src="../assets/img/赞.png" alt="" />
            <i>7096</i>
          </div>
        </div>
      </div>

      <div class="main-list">
        <img src="../assets/img/img1.png" alt="" class="bgd" />

        <div class="tag">
          <p>二次元战士//</p>
          <span>#插画</span>
          <span>#原创</span>
        </div>

        <div class="header-imgs">
          <img src="../assets/img/header.png" alt="" />
          <em class="header-id">{{ username }}</em>
        </div>

        <div class="images">
          <div class="iconic">
            <img src="../assets/img/kanguo.png" alt="" />
            <i>120.6w</i>
          </div>
          <div class="iconics">
            <img src="../assets/img/赞.png" alt="" />
            <i>8961</i>
          </div>
        </div>
      </div>

      <div class="main-list">
        <img src="../assets/img/img3.png" alt="" class="bgd" />

        <div class="tag">
          <p>cosplay//</p>
          <span>#插画</span>
          <span>#原创</span>
          <span>#同人</span>
        </div>

        <div class="header-imgs">
          <img src="../assets/img/header.png" alt="" />
          <em class="header-id">{{ username }}</em>
        </div>

        <div class="images">
          <div class="iconic">
            <img src="../assets/img/kanguo.png" alt="" />
            <i>1.0w</i>
          </div>
          <div class="iconics">
            <img src="../assets/img/赞.png" alt="" />
            <i>9469</i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { useRouter } from "vue-router";
import { ShareSheet, Toast } from "vant";
import { ref } from "vue";

export default {
  setup() {
    const router = useRouter();

    const showShare = ref(false);
    const options = [
      [
        { name: "微信", icon: "wechat" },
        { name: "朋友圈", icon: "wechat-moments" },
        { name: "微博", icon: "weibo" },
        { name: "QQ", icon: "qq" },
      ],
      [
        { name: "复制链接", icon: "link" },
        { name: "分享海报", icon: "poster" },
        { name: "二维码", icon: "qrcode" },
        { name: "小程序码", icon: "weapp-qrcode" },
      ],
    ];

    const scroll = function ($event) {
      console.log($event);
    };

    scroll();

    const onSelect = (option) => {
      Toast(option.name);
      showShare.value = false;
    };

    const goback = function () {
      router.go(-1);
    };

    let username = ref(null);
    const getUsername = () => {
      fetch(`http://2107.wqdp.com.cn/index/tokenInfo`, {
        method: "POST",
        body: JSON.stringify({
          token: localStorage.getItem("token"),
        }),
        headers: {
          "content-type": "application/json",
        },
      }).then((rsp) =>
        rsp.json().then((res) => {
          if (res.status == 0) {
            username.value = res.result.username;
          } else {
            router.push("/login");
            console.log(res.msg);
          }
        })
      );
    };
    getUsername();

    return { goback, options, onSelect, showShare, scroll, username };
  },
  components: {
    vanShareSheet: ShareSheet,
  },
};
</script>

<style lang="less" scoped>
.posbox {
  width: 100%;
  position: fixed;
  display: flex;
  justify-content: space-between;
  z-index: 999;
  background: #333333;
  .back {
    width: 9px;
    height: 15px;
  }
  .more {
    width: 4px;
    height: 15px;
  }
  img {
    margin: 15px 25px;
  }
}
.header {
  position: relative;

  > img {
    width: 100%;
  }
  .info {
    position: absolute;
    top: 0px;
    left: 0;
    right: 0;
    bottom: 80px;
    background-color: rgba(0, 0, 0, 0.425);
    font-family: PingFang;
    font-weight: 500;
    color: #ffffff;
    img {
      display: block;
      width: 91px;
      height: 91px;
      margin: 93px auto 10px;
    }
    h2 {
      font-size: 16px;
      text-align: center;
    }
    > div {
      margin: 0 auto;
      width: 200px;
      display: flex;
      justify-content: space-around;
      margin-top: 25px;
      span {
        font-size: 11px;
      }
    }
  }
}

.organization {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9;
  width: 313px;
  height: 72px;
  background: #ffffff;
  border-radius: 9px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  .count {
    font-size: 14px;
    font-family: PingFang;
    font-weight: 500;
    color: #333333;
    h2 {
      margin-top: 9px;
      margin-bottom: 10px;
    }
    div {
      span {
        font-size: 11px;
        color: #999999;
        margin-right: 10px;
      }
    }
  }
  .img {
    border-radius: 50%;
    border: 1px solid rgb(179, 177, 177);
    margin-left: 14px;
    margin-right: 10px;
  }
  .arrows {
    width: 8px;
    margin-left: 85px;
  }
}

.main {
  padding: 11px;
  h2 {
    height: 35px;
    line-height: 35px;
    font-size: 14px;
    font-family: PingFang;
    font-weight: 500;
    color: #333333;
  }
  .main-list {
    float: left;
    width: 170px;
    height: 285px;
    background: #ffffff;
    border-radius: 9px;
    margin-right: 6px;
    margin-bottom: 10px;
    position: relative;
    .header-imgs {
      overflow: hidden;
    }

    .header-imgs img {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      float: left;
      margin-left: 10px;
    }

    .header-id {
      // display: inline-block;
      font-size: 8px;
      font-family: PingFang;
      font-weight: 500;
      color: #666666;
      line-height: 18px;
      margin-left: 6px;
      float: left;
    }

    .iconic {
      height: 25px;
      float: left;
      margin-left: 10px;
      line-height: 15px;
    }
    .iconics {
      height: 25px;
      float: right;
      margin-right: 20px;
      line-height: 15px;
    }
    .iconic img,
    .iconics img {
      width: 14px;
      height: 10px;
      margin-right: 5px;
    }
    .iconic i,
    .iconics i {
      // width: 23px;
      // height: 8px;
      font-size: 10px;
      font-family: Helvetica;
      font-weight: 400;
      color: #999999;
      // line-height: 18px;
    }

    .bgd {
      width: 170px;
      height: 231px;
      border-radius: 9px 9px 0px 0px;
    }

    .tag {
      position: absolute;
      bottom: 54px;
      p {
        // width: 79px;
        height: 12px;
        font-size: 13px;
        font-family: PingFang;
        font-weight: bold;
        color: #fff;
        line-height: 18px;
        margin-left: 10px;
      }
      span {
        display: inline-block;
        width: 36px;
        height: 15px;
        background: #f5f5f5;
        border-radius: 8px;
        font-size: 10px;
        font-family: PingFang;
        font-weight: 500;
        color: #999999;
        text-align: center;
        line-height: 15px;
        margin-right: 10px;
        margin-left: 10px;
      }
    }
  }
}
</style>
